﻿@model smp.ButterflyCakes.Models.ViewModels.Order.ShapeBuilderView
@{
    ViewBag.Title = "Shape Builder";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>
    <div class="row-fluid">
        <ul class="breadcrumb">
            <li><a href="/home/index/">Home</a><span class="divider">/</span></li>
            <li><a href="/order/edit/@Model.OrderId">Order</a><span class="divider">/</span></li>
            <li class="active">Shape Builder</li>
        </ul>
    </div>
    <div class="row-fluid">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <ul class="nav">
                        <li class="active"><a class="brand" href="#">Shape Builder</a> </li>
                        <li><a id="previous" href="/order/edit/@Model.OrderId">Back to order</a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        @Html.HiddenFor(x => x.ComponentId)
        @Html.HiddenFor(x => x.OrderId)

        <div class="pull-left" style="width: 45%; min-width: 450px" >
            <div class="form-actions">
                <div class="">
                    <button data-toggle="buttons-checkbox" id="erase" type="button" class="btn btn-info"
                        style="width: 150px">
                        Enable Eraser</button>
                    <button id="clearAll" type="button" class="btn btn-info">
                        Clear all</button>
                </div>
            </div>
            <div id="diagramcontainer" class="">
                <ol id="shapeBuilderGrid">
                    @for (int vertical = 0; vertical < 25; vertical++)
                    {
                        for (int horizontal = 1; horizontal < 26; horizontal++)
                        {
                            var cell = horizontal + (vertical * 25);
                            var gridClasses = "hor" + horizontal + " ver" + vertical;
                            if (Model.ActiveCells.Contains(cell))
                            {
                                gridClasses += " selectable-selected";
                            }
                        <li class="selectable @gridClasses" vertical="@vertical" horizontal="@horizontal" cell="@cell">
                        </li>
                        }
                    }
                </ol>
            </div>
        </div>
        <div class="pull-right" style="width: 45%;">
            <div class="">
                <div id="portionsInputContainer" class="form-actions">
                    <strong>Portion to Size Calculator</strong>
                    <div class="control-group">
                        <label class="control-label" for="Portions">
                            Required Portions</label>
                        <input type="text" class="intspinner" id="Portions" name="Portions" value="@Model.Portions"/>
                    </div>
                    <div class="row-fluid">
                        <strong>Calculate for :</strong>
                    </div>
                    <div class="row-fluid">
                        <button id="calculateParty" type="button" class="btn btn-success">
                            Party Portions</button>
                        <button id="calculateWedding" type="button" class="btn btn-success">
                            Wedding Portions</button>
                    </div>
                </div>
                <div id="SizeSelectionContainer" class="hide" style="max-height: 400px; overflow-x: hidden; overflow-y: scroll; padding-bottom: 10px;">
                </div>
                <div id="SelectedSizeContainer" class="hide span9">
                    <table class="table table-bordered table-hover">
                            <tr>
                                <td>Portions</td>
                                <td><p id="selectedPortions"></p></td>
                            </tr>
                            <tr>
                                <td>Length</td>
                                <td><p id="selectedLength"></p></td>
                            </tr>
                            <tr>
                                <td>Width</td>
                                <td><p id="selectedWidth"></p></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <strong>Baked sizes</strong>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <p id="selectedSizes"></p>
                                </td>
                            </tr>
                        </table>
                    <div class="form-actions">
                        <div id="SaveError" class="alert alert-error hide">
                            <button class="close" data-dismiss="alert" type="button">
                                ×</button>
                            <strong>Error</strong><p id="SaveErrorMessage">
                                                  </p>
                        </div>

                        <button id="applyToCake" type="button" class="btn btn-success">
                            Apply to cake</button>

                        <div id="addSpinner" class="loadingimg hide" style="height: 25px">
                            <img src="@Url.Content("~/Content/images/ajax-loader.gif")" alt="Loading..."/>
                        </div>

                        <button id="cancelApplyToCake" type="button" class="btn btn-warning">
                            Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="@Url.Content("~/Scripts/ShapeBuilder.js")" type="text/javascript"></script>
